<template>
  <div class="full-page">
    <van-nav-bar title="编辑资料" left-arrow @click-left="onClickLeft" fixed />
    <div class="con">
      <div class="avatar_wrap">
        <div class="avatar">
          <van-uploader
            v-model="fileList"
            :deletable="false"
            max-count="1"
            style="transform: translate(4px, 4px)"
          >
          </van-uploader>
        </div>
        <p>点击更换头像</p>
      </div>

      <van-cell-group>
        <van-field
          v-model="info.user_name"
          label="用户名"
          placeholder="完善昵称"
        />
        <van-field
          v-model="info.sex"
          label="性别"
          placeholder="未知"
          disabled
          @click="show2 = true"
        />
        <van-field
          v-model="info.birthday"
          label="生日"
          placeholder="完善生日信息"
          disabled
          @click="show1 = true"
        />
      </van-cell-group>
      <van-button color="#6670e4" block @click="submit">修改成功</van-button>
    </div>
    <van-popup v-model="show1" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        class="picker"
        @cancel="show1 = false"
        @confirm="birthday"
        :formatter="formatter"
      />
    </van-popup>

    <van-popup v-model="show2" position="bottom" :style="{ height: '50%' }">
      <van-picker
        show-toolbar
        title="标题"
        :columns="columns"
        :default-index="2"
        class="picker"
        @cancel="show2 = false"
        @confirm="sex"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  NavBar,
  DatetimePicker,
  Picker,
  Popup,
  Button,
  Field,
  Uploader,
  CellGroup,
  Toast,
} from "vant";
import { updateInfo, getUser } from "@/api/mine";
import { upDataImg } from "@/api/publish";

export default {
  components: {
    [NavBar.name]: NavBar,
    [DatetimePicker.name]: DatetimePicker,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    [CellGroup.name]: CellGroup,
    [Toast.name]: Toast,
  },
  data() {
    return {
      fileList: [],
      // 用户信息
      info: {
        avatar: "",
        user_name: "",
        sex: "",
        birthday: "",
      },

      show1: false,
      show2: false,
      minDate: new Date(1998, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
      columns: [
        {
          values: ["男", "女", "未知"],
          defaultIndex: 0,
        },
      ],
    };
  },
  methods: {
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      console.log(val);
      return val;
    },
    onClickLeft() {
      history.back();
    },
    birthday(value) {
      this.info.birthday = String(value);
      this.show1 = false;
    },
    sex(value) {
      this.info.sex = String(value);
      this.show2 = false;
    },
    async submit() {
      const formData = new FormData();
      formData.append("name", this.fileList[0].file);
      const { data } = await upDataImg(formData);
      console.log(data);
      // if (data != "") {
      //   this.info.avatar = data;
      // }
      const res = await updateInfo({
        avatar: data,
        user_name: this.info.user_name,
        sex: this.info.sex,
        birthday: this.info.birthday,
      });
      this.$store.dispatch("user/checkLoginAction");
      Toast.success("修改成功");
    },
  },
  created() {
    this.info = JSON.parse(JSON.stringify(this.$store.state.user.userInfo));
  },
};
</script>

<style lang="scss">
.full-page {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 1;
  overflow: hidden;
  .con {
    height: calc(100% - 50px);
    overflow: auto;
    padding: 0 5vw;
    padding-bottom: 21.3333vw;
    box-sizing: border-box;
    &::-webkit-scrollbar {
      display: none;
    }
    .picker {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }
    .avatar_wrap {
      margin: 30px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .avatar {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        overflow: hidden;
      }
      p {
        margin-top: 3vw;
        font-size: 14px;
      }
    }
    .btn {
      width: 100%;
      button {
        width: 90%;
        height: 40px;
        border: none;
        color: #fff;
        font-size: 14px;
        background-color: rgb(102, 110, 232);
        text-align: center;
        margin-top: 20px;
        margin-left: 20px;
      }
    }
  }
}
</style>
